<template>
  <div class="app-container">
        <!--小组管理-->
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
          <el-form-item label="小组名称" prop="name">
            <el-input
              v-model="queryParams.name"
              placeholder="请输入小组名称"
              clearable
              size="small"
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5" v-if="$store.state.currentJur.isAdd">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
            >新增</el-button>
          </el-col>
          <!--<el-col :span="1.5" v-if="$store.state.currentJur.isEdit">
            <el-button
              type="success"
              plain
              icon="el-icon-edit"
              size="mini"
              :disabled="single"
              @click="handleUpdate"
            >修改</el-button>
          </el-col>
          <el-col :span="1.5" v-if="$store.state.currentJur.isDel">
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              :disabled="multiple"
              @click="handleDelete"
            >删除</el-button>
          </el-col>-->
        </el-row>

        <el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column label="所属小组名称" align="center" key="Name" prop="Name" width="100"  />
         

          <el-table-column
            label="操作"
            align="center"
            width="160"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button v-if="$store.state.currentJur.isEdit"
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
              >编辑</el-button>
              <el-button v-if="$store.state.currentJur.isDel"
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.page"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
         <!-- 添加或修改用户配置对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="400px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="小组名称" prop="name">
                        <el-input v-model="form.name" placeholder="请输入小组名称" maxlength="30" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="所属单位" prop="company_id">
                        <el-select v-model="form.company_id" placeholder="请选择单位">
                            <el-option
                            v-for="item in companyOptions"
                            :key="item.ID"
                            :label="item.Name"
                            :value="item.ID"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
        </el-dialog>
</div>
</template>
<script>
    export default {
        name: 'dept_manage',
        data() {
            return {
                // 查询参数
                queryParams: {
                    page: 1,
                    pageSize: 10,
                    name:''
                },
                // 遮罩层
                loading: false,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                dateRange: [],
                //  表单参数
                form: {},
                // 总条数
                total: 10,
                // 用户表格数据
                tableData: [],
                // 弹出层标题
                title: "",
                open: false,
                 // 表单校验
                companyOptions:[],
                rules: {
                    name: [
                    { required: true, message: "小组名称不能为空", trigger: "blur" },
                    ],
                    company_id: [
                    { required: true, message: "请选择所属单位", trigger: "change" },
                    ],
                },
            }
        },
        created() {
            this.getList();
            this.handleCompony();
        },
        methods: {
            handleQuery() {
                this.queryParams.page = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.dateRange = [];
                this.resetForm("queryForm");
                this.handleQuery();
            },
            //  获取部门
            handleCompony() {
                const this_ = this
                this_.$http.get(this_.GLOBAL.REQUESTURL + "/api/company?page=1&pageSize=100&name=")
                .then(res => {
                    this_.companyOptions = res.data.comlist;
                })
            },
            getList() {
                const this_ = this
                this_.$http.get(this_.GLOBAL.REQUESTURL + "/api/group",{
                    page: this_.queryParams.page,
                    pageSize: this_.queryParams.pageSize,
                    name: this_.queryParams.name
                })
                .then(res => {
                    this_.tableData = res.data.grouplist; //给查询列表赋值
                    this_.total = res.data.total;
                    this_.loading = false;
                })
                .catch(function(err) {
                    this_.tableData = [];
                    this_.total = 0;
                    this_.loading = false;
                });

            },
            handleAdd() {
                this.reset();
                this.title = "添加信息";
                this.open = true;
            },
             /** 修改按钮操作 */
            handleUpdate(row) {
                const that = this;
                this.reset();
                this.open = true;
                this.title = "修改信息";
                this.form.editId = row.ID || this.ids;
                this.$http.get(this.GLOBAL.REQUESTURL+"/api/group/"+this.form.editId)
                .then(res=>{
                    that.form.name = res.data.Name;
                    that.form.company_id = res.data.CompanyID;
                }).catch(err=>{

                })
            },
            handleDelete(row) {
                const _self = this;
                const delIds = row.ID || this.ids;
                this.$modal.confirm('确认要删除"' + row.Name + '"吗？').then(function() {
                   _self.$http.deleteFn(_self.GLOBAL.REQUESTURL+"/api/group/"+row.ID).then(res=>{
                        _self.$modal.msgSuccess( "删除成功");
                        _self.queryParams.page = 1;
                        _self.getList();
                    }).catch(function() {
                        // _self.$modal.msgWarning( "删除失败");
                    });  
                }).catch(function() {
                    // _self.$modal.msgWarning( "删除失败");
                });
            },
            submitForm: function() {
                const _this = this
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        if (this.form.editId != undefined) {
                            _this.$http.put(_this.GLOBAL.REQUESTURL+"/api/group/"+_this.form.editId,{
                                name: _this.form.name,
                                company_id: _this.form.company_id,

                            })
                            .then(res => {
                                if(res.code==200){
                                    _this.$modal.msgSuccess(res.msg);
                                } else {
                                    _this.$modal.msgWarning(res.msg);
                                }
                                _this.open = false;
                                _this.getList();
                            })

                        } else {
                            _this.$http.post(_this.GLOBAL.REQUESTURL+"/api/group",_this.form)
                            .then(res => {
                                if(res.code==200){
                                    _this.$modal.msgSuccess(res.msg);
                                } else {
                                    _this.$modal.msgWarning(res.msg);
                                }
                                _this.open = false;
                                _this.getList();
                            }).catch(err=> {
                               // _this.$modal.msgError('新增失败!');
                            })
                        }
                    }
                })
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.ID);
                this.single = selection.length != 1;
                this.multiple = !selection.length;
            },
             // 取消按钮
            cancel() {
                this.open = false;
                this.reset();
            },
             // 表单重置
            reset() {
                this.form = {
                    editId: undefined,
                    name: '',
                    company_id: undefined,
                };
                this.resetForm("form");
            },
        }
    }
</script> 